<template>
  <div>
    <van-form
      input-align="right"
      error-message-align="right"
      :show-error-message="false"
      show-error
      scroll-to-error
      validate-first
      @failed="onFailed"
      @submit="onSubmit"
    > 
      <van-field
        readonly
        :value="obj.sheepSheName"
        name="sheepSheName"
        label="羊舍名称"
        placeholder="不可修改"
        input-align="right"
        required
        :rules="[{ required: true, message: '' }]"
      />
      <van-field
        readonly
        v-model="obj.sheepSheType"
        name="sheepSheType"
        label="羊舍类型"
        required
        placeholder="不可修改"
        input-align="right"
      />
      <van-field
        readonly
        name="useStandard"
        label="使用标准"
        :value="obj.useStandard"
        required
        placeholder="请选择使用标准"
        input-align="right"
        :rules="[{ required: true, message: '' }]"
        @click="natureShows = true"
      />
      <van-popup v-if="!isDisabled" v-model="natureShows" position="bottom">
                 
        <van-picker
          title="使用标准"
          show-toolbar
          :columns="natureNameList"
          @confirm="onConfirmType"
          @cancel="natureShows = false"
        />
      </van-popup>
      <van-field
        readonly
        name=""
        label="绑定阶段"
        :value="obj.bindStage"
        required
        placeholder="请选择"
        input-align="right"
        :rules="[{ required: true, message: '' }]"
        @click="natureShows2 = true"
      />
      <van-popup v-if="!isDisabled" v-model="natureShows2" position="bottom">
                 
        <van-picker
          title="绑定阶段"
          show-toolbar
          :columns="natureNameList2"
          @confirm="onConfirmType"
          @cancel="natureShows2 = false"
        />
      </van-popup>

      <div class="spacing" />
      <div class="add-btn">
        <van-button
          block
          type="info"
          color="#37B5B5"
          style="width: 85%; margin: auto; margin-top: 50px"
          native-type="submit"
          size="large"
          :loading="loading"
          loading-text="提交中..."
          >提交</van-button
        >
      </div>
     
    </van-form>
  </div>
</template>
<script>
import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Popup,
  Cell,
} from "vant";
import UploadImg from "@/components/uploadImg";
import TitlePanel from "@/components/titlePanel";
import dayjs from "dayjs";
import { getValue, setValue } from "@/utils/auth";
import { getHandle, postHandle } from "../../api";
export default {
  components: {
    UploadImg,
    TitlePanel,
    [Form.name]: Form,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      loading: false,
      isDisabled: false,
      natureShows: false,
      natureShows2: false,
      natureNameList: [],
      natureNameList2: ['羔羊', '成年羊', '泌乳羊', '种公羊', '隔离羊'],
      obj: {
        sheepSheName: null,
        sheepSheType: null,
        useStandard: null,
        bindStage: null,
      },
      contentObj: {},
      type: null,
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    onFailed(errorInfo) {
      Toast(errorInfo.errors[0].message);
    },
    onSubmit(value) {
      this.loading = true;
      // let imgInfos = this.obj.imgInfos.map((item) => item.url).join(",");
    },
    onConfirmType(val) {
      this.natureShows = false
      this.natureShows2 = false
      this.obj.bindStage = val
    }
  },
};
</script>
<style lang="scss" scoped>
.tip {
  padding-top: 15px;
  color: #999999;
  font-size: 12px;
  line-height: 16px;
  margin: auto;
}
.add-btn {
  padding-bottom: 20px;
}
.btn {
  width: 80%;
  margin: 50px auto 0 auto;
}
.btn > div {
  height: 50px;
  background: #2871fe;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  font-size: 17px;
}
.btn .cancel {
  margin-top: 20px;
  background: rgba(40, 113, 254, 0.1);
  border: 1px solid #2871fe;
  color: #2871fe;
}
::v-deep .van-field__label {
  width: 6em;
}
.bthStyle {
  width: 56px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #2871fe;
}
.active {
  background-color: #fff;
  color: #2871fe;
}
.add-btn {
  padding-bottom: 20px;
}
.addbtn{
    width: 50px;
    height: 24px;
    font-size: 13px;
    padding: 0;
    margin-right: 13px;
    z-index: 10;
    float: right;
    margin-top: -38px;
}
.btnfrom{
    padding: 14px 0;
}
.fromInput{
    width: 86%;
}
</style>
